<template>
  <view class="page-body">
    <div class="font-w-600 u-p-24">{{ album.length }}张照片</div>
    <div class="list">
      <div
        @click="onClickItem(i)"
        class="item"
        v-for="(item, i) in album"
        :key="i"
      >
        <image :src="item.pic_url" mode="aspectFill"></image>
        <div v-if="isModify" class="icons">
          <div v-if="!item.check" class="iconfont icon-xuanzekuangmoren"></div>
          <div
            v-else
            class="iconfont icon-success-fill"
            style="color: #f0250e"
          ></div>
        </div>
      </div>
    </div>

    <div class="page-bottom">
      <div class="fixed flex-y-center flex-x-end">
        <div
          @click="switchAllCheck"
          v-if="isModify"
          class="flex-w-1 flex-y-center"
        >
          <div class="icons">
            <div
              v-if="!isAllCheck"
              class="iconfont icon-xuanzekuangmoren"
            ></div>
            <div
              v-else
              class="iconfont icon-success-fill"
              style="color: #f0250e"
            ></div>
          </div>
          <div class="u-m-l-10 u-font-32">全部</div>
        </div>
        <div class="bts flex-y-center">
          <div @click="isModify = !isModify" class="bt">
            {{ isModify ? "取消编辑" : "编辑照片" }}
          </div>
          <div @click="updatePics" class="bt">
            {{ isModify ? "删除照片" : "上传照片" }}
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
import { addPics, delPics } from "@/api/service-home";
export default {
  data() {
    return {
      album: [],
      isModify: false,
    };
  },
  onLoad(params) {
    this.album = JSON.parse(params.album);
  },
  onShow() {},
  methods: {
    // 切换全部选中
    switchAllCheck() {
      this.album = this.album.map((item) => {
        item.check = !this.isAllCheck;
        return item;
      });
    },
    onClickItem(i) {
      if (this.isModify) {
        let item = this.album[i];
        item.check = !item.check;
        this.$set(this.album, i, item);
      } else {
        let urls = this.album.map((item) => item.pic_url);
        uni.previewImage({
          current: i,
          urls
        });
      }
    },
    async updatePics() {
      if (!this.isModify) {
        uni.chooseImage({
          sourceType: ["album", "camera"],
          sizeType: ["original", "compressed"],
          success: async (res) => {
            if (res.errMsg == "chooseImage:ok") {
              var tempFilePaths = res.tempFilePaths;

              let pics = await new Promise(async (resolv, reject) => {
                try {
                  uni.showLoading({
                    title: "正在上传...",
                  });
                  let pics = [];
                  for (let i = 0; i < tempFilePaths.length; i++) {
                    const el = tempFilePaths[i];

                    let url = await new Promise((s, j) => {
                      this.$http.UPLOAD_IMAGE(el, async (res) => {
                        if (res.code == 0) {
                          s(res.url);
                        } else {
                          uni.showToast({
                            title: res.msg,
                            icon: "none",
                            duration: 2000,
                          });
                          j(res);
                        }
                      });
                    });
                    pics.push(url);
                  }
                  uni.hideLoading({});
                  resolv(pics);
                } catch (error) {
                  uni.hideLoading();
                  reject(error);
                }
              });
              let result = await addPics({ pics: pics }, true);
              this.album = result.data;
            }
          },
        });
      }

      // 删除照片
      else {
        let pics = this.album.filter((item) => item.check);
        if (!pics.length) return this.$utils.toast("请选择照片");
        let ids = pics.map(item => item.id)
        const res = await delPics({ ids: ids }, true);
        this.album = res.data;
      }
    },
  },
  computed: {
    isAllCheck() {
      return this.album.every((item) => item.check);
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  .icons {
    .iconfont {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 44rpx;
      text-align: center;
      color: #8c8c8c;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      position: relative;
      margin-bottom: 4rpx;
      margin-left: 4rpx;
      width: 244rpx;
      height: 244rpx;

      > image {
        width: 100%;
        height: 100%;
      }
      .icons {
        position: absolute;
        right: 24rpx;
        bottom: 24rpx;
      }
    }
  }

  .page-bottom {
    box-sizing: content-box;
    height: 100rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .fixed {
      box-sizing: content-box;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100rpx;
      padding: 0 36rpx;
      padding-bottom: env(safe-area-inset-bottom);
      background: #fff;

      .bts {
        .bt {
          margin-left: 16rpx;
          width: 192rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #f0250e;
          border-radius: 120rpx 120rpx 120rpx 120rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>
